<template>
  <div>
    <el-container>
      <el-header>
        <div class="searchStyle">
          <div class="firstSytle">
            <div>
              <el-button size="mini" type="success" @click="initData" icon="el-icon-refresh">刷新</el-button>
              <el-button size="mini" type="primary" @click="save" icon="el-icon-circle-plus-outline">添加</el-button>
              <el-button size="mini" type="danger" @click="deleteBatch" icon="el-icon-delete">删除</el-button>
              <el-button size="mini" type="success" @click="exportDrom" icon="el-icon-upload2">导出数据</el-button>
            </div>
            <div>
              <el-input class="inputStyle" size="mini" v-model="searchBuildId" placeholder="请选择公寓号"></el-input>
              <el-input class="inputStyle" size="mini" v-model="searchValue" placeholder="请选择房间号"></el-input>
              <el-button size="mini" type="primary" @click="searchAll">查询</el-button>
              <el-button size="mini" type="primary" @click="emptyInput">重置</el-button>
            </div>
          </div>
        </div>
      </el-header>

      <el-main style="padding-left: 1px;height:100%">
        <div>
          <el-table :data="dorms" stripe v-loading="tableLoading" size="mini" style="width: 100%;"  @selection-change="selectDel" >
            <el-table-column type="selection" width="30"></el-table-column>
            <el-table-column prop="listId" label="序号" width="80px" align="center"></el-table-column>
            <el-table-column prop="buildId" label="公寓编号" width="150px"></el-table-column>
            <el-table-column prop="roomId" label="宿舍号"></el-table-column>
            <el-table-column prop="num" label="床位数"></el-table-column>
            <el-table-column prop="createTime" label="添加时间" width="260px"></el-table-column>
            <el-table-column label="操作" align="center" width="200px"> 
              <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" size="mini" @click="details(scope.row)"></el-button>
                <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteId(scope.row)"></el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="lastLine" style="margin-top: 10px">               
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page.sync="pageNum" :page-sizes="[10, 20,30,50,100,200,]"
                           :page-size="pageSize"
                           layout="sizes, prev, pager, next" :total="total">      
            </el-pagination>
          </div>
        </div>
      </el-main>
    </el-container>
    <!-- 宿舍添加 -->
    <el-dialog title="添加" width="30%" :visible.sync="addBuildClick">
      <el-form :model="addForm" :rules="rules" ref="addForm" label-width="120px" >
        <el-form-item label="公寓编号：" prop="buildId">
          <el-input v-model.number="addForm.buildId" placeholder="请输入公寓号"></el-input>
        </el-form-item>
        <el-form-item label="宿舍号：" prop="roomId">
          <el-input v-model.number="addForm.roomId" placeholder="请输入宿舍号"></el-input>
        </el-form-item>
        <el-form-item label="床位数：" prop="num">
          <el-input v-model.number="addForm.num" placeholder="请输入床位数"></el-input>
        </el-form-item>
      </el-form>
       <div slot="footer">
        <el-button @click="annulment('addForm')">取 消</el-button>
        <el-button type="primary" @click="addBuild('addForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 宿舍详情 -->
    <el-dialog title="详情" width="30%" :visible.sync="detailBuildClick">
      <el-form :model="updataForm" :rules="rules" ref="updataForm" label-width="120px" >
        <el-form-item label="公寓编号：" prop="buildId">
           <el-select v-model="updataForm.buildId" style="width:100%;">
            <el-option v-for="item in selectBulid" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="宿舍号：" prop="roomId">
             <el-select v-model="updataForm.roomId" placeholder="请选择宿舍" style="width:100%;" >
            <el-option v-for="item in selectRoom" :key="item.value"  :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="床位数：" prop="num">
          <el-input v-model.number="updataForm.num" placeholder="请输入床位数"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="detailBuildClick=false">取 消</el-button>
        <el-button type="primary" @click="updateBuild('updataForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    import {postMethod} from "../../utils/api";

    export default {
        data() {
            return {
               selectBulid: [ //楼号
                    {
                        label: '',
                        value: '',
                    }
                ],
                selectRoom: [ //宿舍号
                    {
                        label: '',
                        value: '',
                    }
                ],
                dorm: {
                    id: '',
                    buildId: '',
                    roomId: '',
                    num: '',
                    createTime: '',
                },
                dorms: [],
                tableLoading: false,
                pageNum: 1,
                pageSize: 10,
                total: 0,
                list: [],
                searchValue: '',
                searchBuildId: '',
                addForm:{
                  buildId:'',
                  roomId:'',
                  num:'',
                },
                addBuildClick:false,
                updataForm:{
                  buildId:'',
                  roomId:'',
                  num:'',
                },
                detailBuildClick:false,
                tableId:[],
                rules:{
                  buildId:[
                    {type: 'number',required:true, message:'请输入公寓编号',tigger:'blur'}
                  ],
                  roomId:[
                    {type: 'number',required:true, message:'请输入宿舍号',tigger:'blur'}
                  ],
                  num:[
                    {type: 'number',required:true, message:'请输入床位数',tigger:'blur'}
                  ],
                },

                requestObj: {
                    orderConditions: [],
                    pageIndex: 1, //当前页数
                    pageItemCount: 10, //每页条数
                    whereConditions: [],
                },
            };
        },
        methods: {

            initData: function () {
                this.tableLoading = true;
                 var tempdate
                // var _this = this;
                this.getRequest("/dor/findAllRoom?pageSize=" + this.pageSize + "&pageNum=" + this.pageNum).then(resp => {
                    this.tableLoading = false;
                    if (resp && resp.status == 200) {
                        this.total = resp.data.obj.total
                        this.dorms = resp.data.obj.data;
                        for (var i = 0; i < this.dorms.length; i++) {
                            let b;
                            b = i + 1
                            this.dorms[i].listId = b
                            tempdate =this.dorms[i].createTime
                            this.dorms[i].createTime=this.getDate(tempdate)
                        }
                    }
                })
            },
            exportDrom(){  //导出数据
                window.open('/dor/export', '_parent');
            },

            deleteId(row) {

                this.tableLoading = true;
                this.deleteRequest("/dor/delRoom/" + row.id).then(resp => {
                    this.tableLoading = false;
                    if (resp && resp.status == 200) {
                        this.initData();
                        Message.success({message: data.data.msg});
                    }
                })
            },
            details(row){
              this.detailBuildClick=true
              this.updataForm=row
            },
            save() {
              this.addForm={
                  buildId:'',
                  roomId:'',
                  num:'',
              }
              this.addBuildClick=true
            },
            updateBuild(formName){
              this.$refs[formName].validate((valid) =>{
                if(valid){
                  // delete this.updataForm.num
                  delete this.updataForm.listId
                  delete this.updataForm.createTime
                   postMethod("/dor/updateRoom", this.updataForm).then(resp => {
                      if (resp && resp.status == 200) {
                          this.initData()
                          this.detailBuildClick=false
                          // Message.success({message: data.data.msg});
                      }
                  })
                }else{
                  return false
                }
              })
            },
            addBuild(formName){
              this.$refs[formName].validate((valid) =>{
                if(valid){
                postMethod("/dor/addRoom", this.addForm).then(resp => {
                      if (resp && resp.status == 200) {
                          this.initData()
                          this.addBuildClick=false
                          this.$refs[formName].resetFields();
                          Message.success({message: data.data.msg});
                      }
                  })
                }else{
                  return false
                }
              })
            },
            annulment(formName){
              this.$refs[formName].resetFields();
              this.addBuildClick=false
            },
            deleteBatch() {
               if(this.tableId.length===0){
                    this.$message.error('请选择要删除的项目');
                    return false;
                }
                var id="";
                for(var i=0;i<this.tableId.length;i++){
                    var id1 =this.tableId[i];
                    if(i==this.tableId.length-1){
                        id+=id1;
                    }else{
                        id += id1+ ","
                    }
                }
                this.deleteRequest("/dor/deleteBatch/" + id).then(resp => {
                      _this.tableLoading = false;
                      if (resp && resp.status == 200) {
                          this.initData()
                          Message.success({message: data.data.msg});
                      }
                  })
            },


            searchAll() {
                this.initDataParms();
                this.tableLoading = true;
                postMethod("/dor/findByKeyWords", this.requestObj).then(resp => {
                    this.tableLoading = false;
                    if (resp && resp.status == 200) {
                        this.total = resp.data.data.total
                        this.dorms = resp.data.data.data;
                    }
                })

            },

            initDataParms() {
                this.getSort();
                this.requestObj.whereConditions = [];
                if (this.searchBuildId !== '') {
                    this.requestObj.whereConditions.push({
                        field: "buildId",
                        method: 'Like',
                        value: this.searchBuildId,
                    })
                }
                if (this.searchValue !== '') {
                    this.requestObj.whereConditions.push({
                        field: "roomId",
                        method: 'Equal',
                        value: this.searchValue,
                    })
                }
            },
            getSort() {
                this.requestObj.orderConditions.push({
                    field: 'roomId',
                    method: 'ASC',
                });
                this.requestObj.orderConditions.push({
                    field: 'createTime',
                    method: 'DESC',
                });
            },

            handleSizeChange(val) {    //分页
                this.pageSize = val
                this.initData()
            },
            handleCurrentChange(val) {   //分页
                this.pageNum = val
                this.initData()
            },
            emptyInput() {
                this.searchValue = '';
                this.searchBuildId = '';
                this.initData();
            },
            getDate(time){
              var date = new Date(time);
              var year = date.getFullYear();
              var month = date.getMonth() + 1;
              var day = date.getDate();
              var hour = date.getHours();
              var minute = date.getMinutes();
              var second = date.getSeconds();
              var date1 = year+'-'+formatNumber(month)+'-'+formatNumber(day)+' '+formatNumber(hour)+':'+formatNumber(minute)+':'+formatNumber(second)
              return date1
              function formatNumber(n){   //补零
                n = n.toString()
                return n[1] ? n : '0' + n
              }
            },
            selectDel(row){
              if(row.length!=0){
                for(var i=0;i<row.length;i++){
                    this.tableId[i]=row[i].id;
                }
              }else if(row.length == 0){
                  this.tableId=row
              }
            },
             getRoom() {    //获取宿舍号
              this.getRequest("/config/room").then(resp => {
                  this.tableLoading = false;
                  if (resp && resp.status == 200) {
                      var tempList = []
                      tempList = resp.data.obj
                      for (var i = 0; i < tempList.length; i++) {
                          this.selectRoom = tempList
                          this.selectRoom[i].label = tempList[i].roomId.toString()
                          this.selectRoom[i].value = tempList[i].roomId.toString()
                      }
                  }
              })
            },
            getBulid() {   //获取楼号
                this.getRequest("/config/build").then(resp => {
                    this.tableLoading = false;
                    if (resp && resp.status == 200) {
                        var tempList = []
                        tempList = resp.data.obj
                        for (var i = 0; i < tempList.length; i++) {
                            this.selectBulid=tempList
                            this.selectBulid[i].label = tempList[i].buildId.toString()
                            this.selectBulid[i].value = tempList[i].buildId.toString()
                        }
                    }
                })
            },
            handleBuild(row){
              this.tempBuildId=row
            },
        },

        mounted: function () {
            this.initData();
            this.getBulid();
            this.getRoom();
        },

    }
</script>

<style scoped>
  .searchStyle {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .firstSytle {
    margin-top: 30px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .inputStyle {
    width: 120px;
  }

  .lastLine {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin:10px 0 10px 0;
  }

  .el-row {
    margin: 10px 0;
  }

  .el-table {
    text-align: left;
    size: auto;
    width: 150px;
  }
</style>
